/**故障弹窗页面 */
<template>
  <div>
    <!--搜索表单-->
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="'100'" :collapse="false" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!--列表-->
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :height="'500px'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.choose = arr)"
    />
    <!--间隔-->
    <div style="width:100%;height:44px;"></div>
    <!--操作按钮-->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button type="primary" @click="save()">确定</el-button>
      <el-button @click="back()">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getAddMaintainPDIDtls } from '@/api/repair/otherBusiness/maintainPDI/index';

export default {
  props: ['vehicleTypeCode'],
  data() {
    let costItemInfos;
    return {
      topFilterList: this.createTopFilterList(), // //搜索表单
      fetchParams: { xhrAbort: false, vehicleTypeCode: this.vehicleTypeCode }, // 参数
      columns: this.createTableColumns(), // 表格列
      fetchApi: null, // 请求接口
      choose: [] // 选中的数据
    };
  },
  mounted() {
    let item = {
      itemCode: 'cs',
      itemName: 'css',
      checkFlag: 1,
      dealWay: '',
      pdiFee: 66
    };
    this.$refs.table.$refs.pageTable.EXECUTE_INSERT(item);
  },
  /** 方法 */
  methods: {
    /** 搜索表单，返回搜索条件 */
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '检查项目代码',
          fieldName: 'itemCode',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车型代码',
          fieldName: 'vehicleTypeCode',
          initialValue: this.vehicleTypeCode
        }
      ];
    },
    /** 列表，返回列表表头 */
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '检查项目代码',
          dataIndex: 'itemCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '检查项目名称',
          dataIndex: 'itemName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '检查标识',
          dataIndex: 'checkFlag',
          sorter: true,
          filter: true,
          filterType: 'input',
          initialValue: 1,
          render: props => {
            return <span>{props.row.checkFlag == 1 ? '合格' : '不合格'}</span>;
          }
        },
        {
          title: '处理方式',
          dataIndex: 'dealWay',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    /** 确定按钮 */
    save() {
      if (this.choose.length > 0) {
        this.$emit('return', this.choose);
      } else {
        this.$notify({
          title: '错误信息',
          message: '请选择检查项目信息',
          type: 'error'
        });
      }
    },
    /** 取消按钮 */
    back() {
      this.$emit('return', {});
    }
  }
};
</script>
